<template>
    <div class="form">
        <!-- <span>
            <icon-close class="close" @click="closeDialog" />
        </span> -->
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="card">
            <!-- 登录 -->
            <el-tab-pane label="登录" name="login">
                <Login />
            </el-tab-pane>

            <!-- 注册 -->
            <el-tab-pane label="注册" name="register">
                <Register />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import Login from "@/components/loginRegister/Login.vue";
import Register from "@/components/loginRegister/Register.vue";
import type { TabsPaneContext } from "element-plus";
// 创建实例
const instance = getCurrentInstance();

const closeDialog = () => {
    //  关闭dialog
    instance?.proxy?.$Bus.emit("closeDialog")
}

//tab切换
const activeName = ref("login");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  
};

</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

.form {
    position: fixed;
    left: 25%;
    right: 25%;
    top: 10%;
    background-color: rgb(246, 246, 246);
    border-radius: 0.1rem;

    .close {
        float: right;
        padding: 0.08rem;
    }

    span {
        cursor: pointer;
    }
}
</style>
